<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <script src="/webjars/jquery/3.3.1/jquery.min.js"></script>
    <script src="/webjars/Semantic-UI/2.4.1/semantic.js"></script>
    <script src="/js/main.js"></script>
    <link href="/webjars/Semantic-UI/2.4.1/semantic.css" rel="stylesheet">
    <link href="/css/main.css" rel="stylesheet">
    <title>Книги</title>
</head>
<body>
    <div th:insert="~{menu :: menu}"></div>
    <div class="ui container">
        <h1 class="ui header">Книги</h1>
        <table class="ui table">
            <thead>
            <tr>
                <th>id</th>
                <th>Название</th>
                <th>Автор</th>
                <th>Жанр</th>
                <th>Комментарии</th>
                <th>Действия</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="book : ${books}">
                <td th:text="${book.id}">73</td>
                <td th:text="${book.name}">Название книги</td>
                <td th:text="${book.author.name}">Автор</td>
                <td th:text="${book.genre.name}">Жанр</td>
                <td>
                    <a class="ui button" th:href="@{comments(book_id=${book.id})}" href="comments.html">
                        <i class="comments icon"></i>Комментарии
                    </a>
                </td>
                <td>
                    <form action="books/delete" method="post">
                        <input th:value="${book.id}" type="hidden" name="id">
                        <button class="ui button" type="submit"><i class="ui close icon"></i>Удалить</button>
                        <a class="ui button" th:href="@{books/edit(id=${book.id})}" href="bookEdit.html">
                            <i class="ui cogs icon"></i>Ред.
                        </a>
                    </form>
                </td>
            </tr>
            </tbody>
        </table>
        <h3 class="ui dividing header">Добавить книгу</h3>
        <form class="ui form" action="books/create" method="post">
            <div class="field">
                <label>Название книги</label>
                <input class="nameInput" type="text" name="name" placeholder="Введите название книги">
            </div>
            <div class="ui grid">
                <div class="two column row">
                    <div class="column">
                        <div class="field">
                            <label>Авторы</label>
                            <select class="ui fluid search dropdown authorDropdown" name="author_id">
                                <option value="">Выберите автора</option>
                                <option th:each="author : ${authors}"
                                        th:value="${author.id}"
                                        th:text="${author.name}">
                                    Имя автора
                                </option>
                            </select>
                        </div>
                    </div>
                    <div class="column">
                        <div class="field">
                            <label>Жанры</label>
                            <select class="ui fluid search dropdown genreDropdown" name="genre_id">
                                <option value="">Выберите жанр</option>
                                <option th:each="genre : ${genres}"
                                        th:value="${genre.id}"
                                        th:text="${genre.name}">
                                    Название жанра
                                </option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="column">
                        <button class="ui submit button" type="submit"><i class="ui plus icon"></i>Добавить</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</body>
</html>
